<template>
<!--return_goods.wxml-->
<view class="container">
    <view class="goods-mes pd-bg-fff">
        <view class="goods-img"><image class="wh100" :src="url + '/api/goods/goodsThumImages?goods_id=' + order.goods_id + '&width=100&height=100'"></image></view>
        <view class="goods-des">
            <view class="goods-name ellipsis-1">{{order.goods_name}}</view>
            <view class="goods-package">
                <view class="goods-price">价格:￥{{order.goods_price}}</view>
                <view class="goods-num">数量:×{{order.goods_num}}</view>
            </view>
        </view>
    </view>
    <view class="service pd-bg-fff">
        <view class="service-title">服务类型</view>
        <view class="chcek-btns">
            <view v-for="(item, index) in checkBtns" :key="index" :class="index==typeBtnIndex?'checkedBtn':''" :data-i="index" @tap="selectServiceType">{{item}}</view>
        </view>
    </view>
    <view class="apply-num" hidden="true">
        <view class="apply-title">申请数量</view>
        <view class="count">
            <view class="sup-btns" @tap="subNum">-</view>
            <input type="number" :value="applyNum" @blur="setNum"></input>
            <view class="add-btns" @tap="addNum">+</view>
        </view>
    </view>
    <view class="cause">
        <view class="cause-title">提交原因</view>
        <view class="cause-cont" @tap="openPop">{{causeCont}}</view>
    </view>

    <!--提交原因弹出层-s-->
    <view :hidden="popState">
        <view class="cover-layer" @tap="closePop"></view>
        <view class="cause-pop">
            <view class="pop-title">提交原因</view>
            <view class="close-btn" @tap="closePop">×</view>
            <view class="cause-list">
                <view v-for="(item, index) in causeList" :key="index" class="cause-item" :data-i="index" @tap="selectCause">
                    <icon type="success" size="20" :color="checkCauseIndex==index?'red':'gray'"></icon>{{item}}
                </view>
            </view>
        </view>
    </view>
    <!--提交原因弹出层-e-->

    <view class="receiving-wrap">
        <view class="receiving-title">货物状态</view>
        <view class="receiving-status">
          <block v-if="typeBtnIndex == 0">
            <view class="receiving" @tap="selectGoodsStatus" data-status="false">
                <icon type="success" size="20" :color="isReceive?'gray':'red'"></icon>
                未收到货
            </view>         
          </block>          
            <block v-else>
                  <view class="receiving" @tap="selectGoodsStatus" data-status="true">
                    <icon type="success" size="20" color="red"></icon>
                    已收到货
                </view>
            </block>
        </view>
    </view>
    <view class="evaluation">
        <view class="evaluation-title">问题描述</view>
        <textarea class="word-box" placeholder="请你在此描述详细问题" maxlength="500" @input="InputDescription" :hidden="!popState"></textarea>
        <view class="words-num">{{500-maxWord}}/500</view>
    </view>
    <view class="upload-img">
        <view class="upload-title">上传照片</view>
        <view class="pic-list">
            <view v-for="(item, index) in 5" :key="index" class="share-pic">
                <image class="wh100" :src="filePaths[index]?filePaths[index]:defaultPhoto" @tap="selectPhotos" :data-idx="index" @longtap="removePhoto"></image>
            </view>
        </view>
        <view class="upload-tips">为帮助我们更好的解决问题，请上传照片。最多5张，每张不超过5M，支持JPG、BMP、PNG</view>
    </view>
    <view class="contact pd-bg-fff">
        <view class="address">寄回地址:{{order.store_address}}</view>
        <view class="work-time">上班时间:（周一至周五）08:00-19:00</view>
        <view class="tel">客服电话:{{order.service_phone}}</view>
    </view>
    <view class="btn-wrap">
        <view class="submit-btn" @tap="submiApply">提 交</view>
    </view>
</view>
</template>

<script>
// return_goods.js
var app = getApp();
var setting = app.globalData.setting;
var request = app.globalData.request;
var common = require("../../../utils/common.js");
var select = require("../../../utils/selectFiles.js");

export default {
  data() {
    return {
      url: setting.url,
      resourceUrl: setting.resourceUrl,
      defaultPhoto: setting.resourceUrl + "/static/static/images/camera.png",
      filePaths: [],
      //本地图片的路径
      uploadPath: [],
      //上传图片的路径
      order: null,
      //请求的订单数据
      recId: 0,
      config: null,
      //系统配置
      maxWord: 0,
      //最多输入的描述字符数提醒
      isLongPress: false,
      //是否进行长按图片操作,解决有些手机上短按和长按同时触发的问题
      checkBtns: ["仅退款", "退货退款", "换货"],
      //服务按钮tab
      typeBtnIndex: 0,
      //服务按钮索引
      applyNum: 1,
      //申请数量
      isReceive: false,
      causeCont: '注意保持商品的完好,建议您先与卖家沟通',
      //提交原因，默认提示文字
      causeList: ["订单不能按预计时间送达", "操作有误（商品、地址等选错）", "重复下单/误下单", "其他渠道价格更低", "该商品降价了", "不想买了"],
      checkCauseIndex: -1,
      popState: true,
      description: ''
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var that = this;
    this.setData({
      recId: options.rec_id
    });
    this.requestReturnGoods(options.rec_id);
  },
  methods: {
    requestReturnGoods: function (rec_id) {
      var that = this;
      request.get('/api/order/return_goods', {
        failRollback: true,
        data: {
          rec_id: rec_id
        },
        success: function (res) {
          that.setData({
            order: res.data.result,
            applyNum: res.data.result.goods_num
          });
        }
      });
    },

    /** 输入问题描述 */
    InputDescription: function (e) {
      this.setData({
        maxWord: e.detail.value.length
      });
      this.description = e.detail.value;
    },

    /** 选择货物的状态 */
    selectGoodsStatus: function (e) {
      this.setData({
        isReceive: e.currentTarget.dataset.status
      });
    },

    /** 选择服务类型 */
    selectServiceType: function (e) {
      this.setData({
        typeBtnIndex: e.currentTarget.dataset.i
      });

      if (e.currentTarget.dataset.i == 2) {
        this.setData({
          isReceive: true
        });
      }

      if (e.currentTarget.dataset.i == 1) {
        this.setData({
          isReceive: true
        });
      }

      if (e.currentTarget.dataset.i == 0) {
        this.setData({
          isReceive: false
        });
      }
    },

    /** 申请数量 */
    setNum: function (e) {
      this.checkApplyNum(Number(e.detail.value));
    },
    subNum: function () {
      this.checkApplyNum(this.applyNum - 1);
    },
    addNum: function () {
      this.checkApplyNum(this.applyNum + 1);
    },
    checkApplyNum: function (num) {
      if (isNaN(num)) {
        num = this.order.goods_num;
      } else if (num < 1) {
        num = 1;
      } else if (num > this.order.goods_num) {
        num = this.order.goods_num;
      }

      this.setData({
        applyNum: num
      });
    },

    /** 提交原因弹窗 */
    openPop: function () {
      this.setData({
        popState: false
      });
    },
    closePop: function () {
      this.setData({
        popState: true
      });
    },

    /** 选择申请原因 */
    selectCause: function (e) {
      this.setData({
        checkCauseIndex: e.currentTarget.dataset.i,
        causeCont: this.causeList[e.currentTarget.dataset.i]
      });
      this.closePop();
    },

    /** 选择照片 */
    selectPhotos: function (e) {
      if (this.isLongPress) {
        this.isLongPress = false;
        return;
      }

      var that = this;
      select.selectPhotos(this.filePaths, e.currentTarget.dataset.idx, function (filePaths) {
        that.setData({
          filePaths: filePaths
        });
      });
    },

    /** 删除单张图片 */
    removePhoto: function (e) {
      var that = this;
      this.isLongPress = true;
      select.removePhoto(this.filePaths, e.currentTarget.dataset.idx, function (filePaths) {
        that.setData({
          filePaths: filePaths
        });
      });
    },

    /** 提交申请 */
    submiApply: function () {
      var that = this;
      this.checkSubmit(function () {
        that.uploadPhotos(function () {
          request.post('/api/order/return_goods', {
            data: {
              rec_id: that.recId,
              type: that.typeBtnIndex,
              goods_num: that.applyNum,
              reason: that.causeCont,
              describe: that.description,
              goods_id: that.order.goods_id,
              order_id: that.order.order_id,
              order_sn: that.order.order_sn,
              spec_key: that.order.spec_key,
              is_receive: Number(that.isReceive),
              imgs: that.uploadPath.join(',')
            },
            success: function (res) {
              uni.showToast({
                title: '提交成功',
                mask: true,
                duration: 1000,
                complete: function () {
                  setTimeout(function () {
                    uni.navigateBack();
                  }, 1000);
                }
              });
            }
          });
        });
      });
    },

    /** 上传多图片 */
    uploadPhotos: function (call, pathIdx) {
      if (this.filePaths.length == 0) {
        return call();
      }

      if (typeof pathIdx != 'number') {
        pathIdx = 0;
      } else if (pathIdx >= this.filePaths.length) {
        return call();
      }

      var that = this;
      request.uploadFile('/api/order/upload_return_goods_img', {
        filePath: that.filePaths[pathIdx],
        name: 'return_imgs',
        success: function (res) {
          that.uploadPath[pathIdx] = res.data.result;
          that.uploadPhotos(call, pathIdx + 1); //递归上传多张图片
        }
      });
    },
    checkSubmit: function (call) {
      if (this.checkCauseIndex < 0) {
        return app.globalData.confirmBox("请先选择提交原因");
      }

      if (this.description.length == 0) {
        return app.globalData.confirmBox("请先填写问题描述");
      }

      if (this.filePaths.length == 0) {
        return uni.showModal({
          title: '确定不上传图片吗？',
          success: function (res) {
            if (res.confirm) {
              call();
            }
          }
        });
      }

      call();
    }
  }
};
</script>
<style>
/* return_goods.wxss */
.goods-mes{
    height: 100rpx;
    display: flex;
    padding:20rpx 30rpx;
    justify-content:space-between;
}
.goods-img{
    width: 100rpx;
    height: 100rpx;
    overflow: hidden;
}
.goods-des{
    width: 560rpx;
}
.goods-des>view{
    width: 100%;
    line-height: 1;
    font-size: 30rpx;
    color: #444;
}
.goods-package{
    display:flex;
    margin-top:36rpx;
}
.goods-package>view{
    font-size:24rpx;
    color:#777;
}
.goods-price{
    margin-right:30rpx;
}
.service{
    margin-top:20rpx;
    color: #444;
}
.service-title{
    font-size:32rpx;
    height: 80rpx;
    line-height: 80rpx; 
}
.chcek-btns{
    display: flex;
    padding-bottom: 20rpx;
}
.chcek-btns>view{
    height: 54rpx;
    padding: 0 40rpx;
    margin-right: 20rpx;
    line-height: 54rpx;
    border: 1px solid #f3f3f3;
    font-size: 30rpx;
    border-radius: 8rpx;
}
.chcek-btns .checkedBtn{
    border-color: #e23435;
    color: #e23435;
}
.apply-num{
    margin-top:20rpx;
    color: #444;
    font-size: 32rpx;
    padding: 0 30rpx 20rpx;
    background-color: #fff; 
}
.apply-title{
    height: 80rpx;
    line-height: 80rpx; 
}
.count{
    display: flex;
    width: 152rpx;
    border: 1px solid #f3f3f3;
    border-radius: 8rpx;
    
}
.count>view,.count>input{
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
}
.count>input{
    border-left: 1px solid #f3f3f3;
    border-right: 1px solid #f3f3f3;
}
.cause{
    display: flex;
    padding: 20rpx 30rpx;
    margin-top: 20rpx;
    background-color: #fff;
    line-height: 42rpx;
    overflow: hidden;
}
.cause-title{
    font-size: 32rpx;
    color: #444;
    margin-right: 20rpx;
}
.cause-cont{
    font-size: 28rpx;
    color: #777;
    width: 540rpx;
    height: 42rpx;
}
.cause-pop{
    position: fixed;
    z-index: 1001;
    left: 0;
    bottom: 0;
    width:690rpx;
    padding:20rpx 30rpx 50rpx;
    color: #777;
    font-size: 28rpx;
    background-color: #fff;
}
.close-btn{
    position: absolute;
    right: 30rpx;
    top: 35rpx;
    font-size: 40rpx;
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    color: #444;
}
.pop-title{
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
    color: #444;
}
.cause-item{
    display: flex;
    align-items: center;
    height: 60rpx;
    margin:10rpx 0;
}
.cause-item>icon{
    margin-right: 20rpx;
}
.receiving-wrap{
    padding: 20rpx 30rpx;
    margin-top: 20rpx;
    background-color: #fff;
}
.receiving-title{
    line-height: 60rpx;
    font-size:32rpx;
    color:#444;
}
.receiving-status{
    display: flex;
}
.receiving{
    height:60rpx;
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #777;
    margin-right: 30rpx;
}
.receiving>icon{
    margin-right: 20rpx;
}
.evaluation{
    padding: 30rpx 30rpx;
    margin-top: 20rpx;
    position: relative;
    font-size: 28rpx;
    background-color: #fff;
}
.evaluation-title{
    margin-bottom:20rpx; 
    line-height: 50rpx;
    font-size: 32rpx;
    color: #444;
    border-bottom: 1px solid #f3f3f3;
}
.word-box{
    color: #444;
    line-height: 40rpx;
    width: 100%;
    height: 200rpx;
}
.words-num{
    position: absolute;
    right:30rpx;
    bottom:30rpx;
    color: #777;
}
.upload-img{
    padding: 20rpx 30rpx;
    margin-top: 20rpx;
    background-color: #fff;
}
.upload-title{
    line-height: 60rpx;
    font-size: 32rpx;
    color: #444;
}
.pic-list{
    display: flex;
    padding: 20rpx 0;
    justify-content: space-around;
}
.share-pic{
    width: 126rpx;
    height: 126rpx;
    border: 1px solid #f3f3f3;
    overflow: hidden;
}
.upload-tips{
    font-size: 28rpx;
    color: #777;
    line-height: 40rpx;
}
.contact{
    margin-top: 20rpx;
    line-height: 72rpx;
    font-size: 32rpx;
    color: #444;
}
.btn-wrap{
    padding: 20rpx 0;
}
.submit-btn{
    width: 320rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color:#f15353;
    color: #fff;
    margin:auto;
}
</style>